<template>
  <!-- 订单支付详情 -->
  <section>
    <div style="border-bottom:1px solid #eee;padding-bottom:10px;">
      <el-page-header @back="goBack" content="账单详情"></el-page-header>
    </div>
    <br />
    <div class="visit_detail_box">
      <div class="userinfo p-sm">
        <p v-if="detail">
          <img v-if="detail.head != ''" :src="detail.head | imageUrl" class="patient_img" alt />
          <img v-else src="/img/unknown-avatar.4f0c79ac.png" class="patient_img" alt />
        </p>
        <p v-if="detail">
          <span style="font-size: 20px; margin-right: 20px; vertical-align: middle;">{{ detail.name }}</span>
          <i class="glyphicon glyphicon-earphone" style="vertical-align: middle; font-size: 18px;"></i>
        </p>
        <div v-if="detail" class="user-field">
          <span>性别：</span>
          {{ detail.sex | toSex }}
        </div>
        <div v-if="detail" class="user-field">
          <span>年龄：</span>
          <label v-if="detail.age > 17">{{ detail.age }}</label>
          <label v-else>{{ detail.birthday | toTimeContrast }}</label>
        </div>
        <div v-if="detail" class="user-field">
          <span>门诊号：</span>
          <span style="color: red;">{{ detail.archivesCode }}</span>
        </div>
      </div>
      <div class="user-content p-sm">
        <el-row style="margin:10px 0px;display:inline-block;width:100%;">
          <el-col :span="6">
            <label style="font-size:16px;">收费项目</label>
          </el-col>
          <el-col style="height:10px;" :span="6"></el-col>
          <el-col style="height:10px;" :span="6"></el-col>
        </el-row>
        <el-row style="margin:10px 0px;">
          <el-col :span="6">收费科室：{{ curInfo.deptName }}</el-col>
          <el-col :span="6">收费医生：{{ curInfo.doctorName }}</el-col>
          <el-col :span="6">收费人员：{{ curInfo.operateName }}</el-col>
          <el-col :span="6">收费时间：{{ curInfo.payTime }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <table class="table-box">
              <thead>
                <tr>
                  <th>收费名称</th>
                  <th>单价</th>
                  <th>数量</th>
                  <th>单位</th>
                  <th>折扣</th>
                  <th>是否套餐抵扣</th>
                  <th>核销数量</th>
                  <th>应收金额</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in itemList" :key="index">
                  <template v-if="item.source != '13'">
                    <td>{{ item.sourceName }}</td>
                    <td>￥{{ item.unitPrice != undefined ? item.unitPrice : item.oneMoney }}</td>
                    <td>{{ item.number ? item.number : item.frequency }}</td>
                    <td>{{ item.unitName }}</td>
                    <td>{{ item.discount }}折</td>
                    <td style="text-align:center;">{{ item.packageWriteOff == 0 ? "否" : "是" }}</td>
                    <td style="text-align:center;">{{ item.packageWriteOffNumber }}</td>
                    <td>￥{{ item.actualAmount }}</td>
                  </template>
                </tr>
              </tbody>
            </table>
          </el-col>
        </el-row>
        <el-row v-if="tsList.length > 0" class="moeny_box" style="margin-top:10px;">
          <el-col class="other" style="height:20px;font-size:16px;margin:5px 0;" :span="24">特殊收费项目</el-col>
          <el-col :span="24">
            <table class="table-box">
              <thead>
                <tr>
                  <th>收费名称</th>
                  <th>原价</th>
                  <th>数量</th>
                  <th>优惠价</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(it, index) in tsList" :key="index">
                  <td>{{ it.sourceName }}</td>
                  <td>￥{{ it.totalAmount }}</td>
                  <td>{{ it.number }}</td>
                  <td>￥{{ it.actualAmount }}</td>
                </tr>
              </tbody>
            </table>
          </el-col>
        </el-row>
        <el-row class="money_box">
          <el-col class="other" :span="18"></el-col>
          <el-col class="money" :span="6">
            <label>费用合计：</label>
            <span>￥{{ totalMoney | changeMoneyToTwo }}</span>
          </el-col>
        </el-row>
        <!-- <el-row class="money_box">
          <el-col class="other" :span="18"></el-col>
          <el-col class="money" :span="6">
            <label>实收金额：</label>
            <span>￥{{total | changeMoneyToTwo}}</span>
          </el-col>
        </el-row> -->
        <el-row class="money_box">
          <el-col class="other" :span="18"></el-col>
          <el-col class="money" :span="6">
            <label>折扣金额：</label>
            <span>￥{{ disAmount | changeMoneyToTwo }}</span>
          </el-col>
        </el-row>
        <template v-for="(item, index) in payWayList">
          <el-row v-if="item.payAmount > 0" :key="index" class="money_box">
            <el-col class="other" :span="18"></el-col>
            <el-col class="money" :span="6">
              <label>{{ payArr[item.source] }}：</label>
              <span>￥{{ item.payAmount | changeMoneyToTwo }}</span>
            </el-col>
          </el-row>
        </template>
        <el-row style="margin-top:20px;">
          <el-button style="float:right;margin-right:10px;" @click="doPrint()">打印</el-button>
        </el-row>
      </div>
      <iframe v-if="showOrder" frameborder="0" height="0px" width="0px" ref="iframe" src="/print/charge.html"></iframe>
    </div>
  </section>
</template>
<script>
import calculate from "../_js/calculate";
import enumArr from "../../_enum/enum";
export default {
  name: "chargeDetail",
  data() {
    return {
      detail: "",
      itemList: [],
      tsList: [],
      btnLoading: false,
      totalMoney: 0,
      total: 0,
      disAmount: 0,
      curInfo: {
        deptName: "",
        doctorName: "",
        operateName: "",
        cureTime: "",
        createTime: "",
        balance: 0
      },
      showOrder: false,
      payWayList: [],
      payArr: enumArr.payArr,
      packageItemList: "",
      packageActualAmount: ""
    };
  },
  created() {},
  mounted() {
    this.getBasic();
    this.findUsUserById();
    this.getItemDetail();
  },
  methods: {
    getItemDetail() {
      let id = this.$route.query.id;
      this.$api.getOrderDetailByMedical({ orderId: id }).then(res => {
        if (res.executed) {
          const {
            list,
            cureTime,
            deptName,
            doctorName,
            operateName,
            totalAmount,
            actualAmount,
            payTime,
            payWayList,
            packageItemList,
            packageActualAmount
          } = res.dataBody;
          this.payWayList = payWayList;
          this.packageItemList = packageItemList;
          this.packageActualAmount = packageActualAmount;
          this.curInfo = {
            cureTime,
            deptName,
            doctorName,
            operateName,
            payTime
          };
          this.itemList = list.filter(it => {
            if (it.source != 13) {
              return it;
            }
          });
          this.tsList = list.filter(it => {
            if (it.source == 13) {
              return it;
            }
          });
          this.totalMoney = totalAmount;
          this.total = actualAmount;
          this.disAmount = Number(totalAmount - actualAmount).toFixed(2);
        }
      });
    },
    //获取患者详情
    findUsUserById() {
      let uid = this.$route.query.patientId;
      this.showLoading();
      this.$api.getPatientInfo({ patientId: uid, hpId: this.adminUser.hpId }).then(res => {
        if (res.executed) {
          this.detail = res.dataBody;
          this.showLoading(false);
        } else {
          this.showLoading(false);
          this.$message.error(res.message);
        }
      });
    },
    getBasic() {
      let th = this;
      th.getCommonConfigByKey("药品剂量单位").then(res => {
        th.dwList = res;
      });
    },
    goBack() {
      this.$router.push({
        path: "/page/chargeIndexV2",
        query: this.getUrlToken({
          // total: th.totalMoney,
          type: 2
        })
      });
    },
    doPrint() {
      this.showOrder = true;
      this.showLoading();
      setTimeout(() => {
        this.iframeContent = this.$refs["iframe"].contentWindow;
        const { name, archivesCode, age, sex, birthday } = this.detail;
        let itemList = [...this.itemList, ...this.tsList];
        this.iframeContent.postMessage(
          {
            cmd: "postJson",
            params: JSON.stringify({
              detail: {
                name: name,
                sex: sex,
                age: age,
                birthday: birthday,
                archivesCode: archivesCode
              },
              // 2021 feat by jy
              // 增加更多费用的打印显示
              payWayList: this.payWayList.map(i => ({ title: this.payArr[i.source], money: i.payAmount.toFixed(2) })),
              list: itemList,
              packageItemList: this.packageItemList,
              packageActualAmount: this.packageActualAmount,
              doctor: this.curInfo.doctorName,
              dept: this.curInfo.deptName,
              logo: this.adminUser.printLogo,
              total: this.totalMoney.toFixed(2),
              jmMoney: Number(this.totalMoney - this.total).toFixed(2),
              disAmount: this.total.toFixed(2), //折扣后金额
              memberName: this.curInfo.operateName,
              visitTime: this.curInfo.cureTime ? this.curInfo.cureTime.substring(0, 10) : "",
              endTime: this.curInfo.payTime ? this.curInfo.payTime.substring(0, 10) : "",
              hospitalName: this.adminUser.hospitalName
            })
          },
          "*"
        );
      }, 500);
      setTimeout(() => {
        this.showLoading(false);
      }, 2000);
    }
  },
  watch: {
    $route: function() {
      this.getBasic();
      this.findUsUserById();
      this.getItemDetail();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../_css/detail.scss";
.patient_img {
  border: 1px solid #ddd;
  border-radius: 5px;
  display: inline-block;
  width: 100px;
  height: 100px;
}
.durg_title {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.money_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  .other {
    height: 10px;
    display: inline-block;
  }
  .money {
    text-align: right;
    padding-right: 10px;
    display: inline-block;
  }
}
.printOrder {
  display: inline-block;
  width: 100%;
}
</style>
